<script setup>
import { ref, reactive, onMounted, getCurrentInstance } from "vue";

const { appContext } = getCurrentInstance();
let global = appContext.config.globalProperties;

const props = defineProps({
  id: {
    type: String,
    requirred: true
  }
});

let map = ref(null)

let option = reactive({
  minZoom: 0,
  maxZoom: 18,
  center: {
    lon: 114.31300434361768,
    lat: 35.74467678747196
  },
  zoom: 11,
  crs: L.CRS.CustomEPSG4326,
  zoomControl: true,
  attributionControl: false
})

onMounted(() => {
  initMap();
});

const initMap = () => {

  global.$map = L.map(props.id, option)
  global.$map.zoomControl.setPosition('bottomright')
  console.log(global.$map)
}

</script>

<template>
  <div :id="props.id" style="width: 100%; height:100%;z-index: 1;"></div>
</template>


